<template>
  <div class="sigin">
      <div class="header">
        <!--返回按钮-->
        <!-- <div class="backTo" v-show="isShow"> -->
             <span v-on:click="back"><img src="/learning/jiantou.jpg" alt=""></span>
        <!-- </div> -->
       
        <span>积分打卡</span>

            <van-share-sheet
              v-model="showShare"
              title="立即分享给好友"
              :options="options"
        />
        <span @click="showShare = true">分享</span>


      </div>
      <div class="photo">
        <img src="/learning/0.jpg" alt="">
      </div>
      <div class="photo1">
        <div class="photo2">
            <img src="/learning/rili.jpg" alt="">
        </div>
        <div class="photo3">
          <img src="/learning/hot.jpg" alt="">
        </div>
        <div class="book">

        </div>
       <div class="More">
         <button>
           <span>更多兑现</span> 
           </button>
       </div>
       <div class="last">
          <img src="/learning/jiang.jpg" alt="">
       </div>
      </div>
  </div>
   
</template>

<script>
import { Toast } from 'vant';
export default {
 data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },
   methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
      back(){
        this.$router.go(-1);//返回上一层
    },
  },
}
</script>

<style scoped>
.sigin{
    width: 100%;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}
.sigin .header{
  width: 3.47rem;
  height: 0.65rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sigin .photo{
  width: 100%;
  height:1.8rem ;
  background-color: #f97255;
  display: flex;
  justify-content: center;
}
.sigin .photo img{
  width: 1.9rem;
  height: 1.5rem;
}
.sigin .photo1{
  width: 100%;
  background-color: #f4f3f8;
  display: flex;
  justify-content: center;
   flex-wrap: wrap;
}
.sigin  .photo2{
  margin-top: -0.3rem;
}
.sigin .book{
  width: 3.4rem;
  height: 1.43rem;
  background-color: #fff;
}
.sigin .More button{
  width: 1rem;
  height: 0.33rem;
  background-color: #ee2f25;
  border-radius: 0.5rem;
  margin: 0.2rem 0rem;
}
.sigin .More button span{
  color: #d8d8d8;
}
</style>